<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Course-Student list</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h2>选课列表</h2>
    <div>
        <select v-model="courseId">
            <option value="0">全部课程</option>
            <option v-for="course in courses" v-bind:value="course.id">{{course.name}}</option>
        </select>
        <select v-model="year">
            <option value="">全部学年</option>
            <option v-for="year in years" v-bind:value="year">{{year}}</option>
        </select>
        <button v-on:click="openEnrollDlg">增加选课</button>
    </div>
    <table border="1" width="100%">
        <tr>
            <th>#</th>
            <th>Course Code</th>
            <th>Course Name</th>
            <th>College</th>
            <th>Student No.</th>
            <th>Student Name</th>
            <th>year</th>
            <th>Operations</th>
        </tr>
        <tr v-for="(cs,index) in courseStudents">
            <td>{{index + 1}}</td>
            <td>{{cs.courseCode}}</td>
            <td>{{cs.courseName}}</td>
            <td>{{cs.collegeName}}</td>
            <td>{{cs.studentNo}}</td>
            <td>{{cs.studentName}}</td>
            <td>{{cs.year}}</td>
            <td>
                <button v-on:click="removeCourseStudent(cs.id)">移除</button>
            </td>
        </tr>
    </table>
    <div>
        <!-- 增加选课对话框 -->
        <dialog ref="dialog">
            <h4> 增加选课学生 </h4>
            <div style="flex:1 1 auto;">
                <select v-model="studentId" style="width:100%;">
                    <option v-for="candidate of candidates" v-bind:value="candidate.id">
                        {{candidate.name}}
                    </option>
                </select>
                <div class="action">
                    <button v-on:click="this.$refs.dialog.close()">Cancel</button>
                    <button v-on:click="addCourseStudents">Save</button>
                </div>
            </div>
        </dialog>
    </div>
</div>
<script>
    const app = {
        data() {
            return {
                courseStudents: [], // 选课数据 - 在此其实是课程对象列表（每个课程内嵌了students对象
                courseId: 0, // 选中的课程 0-全部
                year: '', //开课学年
                years: [2019, 2020, 2021, 2022, 2023], // 自定的可选学年
                courses: [], // 所有的课程 - 该数据用在课程下拉列表控件
                candidates: [], //候选学生
                studentIds: [], // 选课时选中的学生ID列表

                studentId: null,
            }
        },
        // Vue应用对象的生命周期函数之一
        mounted() {
            this.loadCourses();
            // 读取选课情况
            this.loadCourseStudents();
        },
        methods: {
            /** 读取指定/全部课程选课情况 */
            loadCourseStudents() {
                console.log(this.courseId)
                axios.get('/course-student/course-student?courseId=' + this.courseId
                    + '&year=' + this.year).then(res => {
                    this.courseStudents = res.data;
                }).catch(err => {
                    console.error(err);
                });
            },
            /** 从后端读取所有课程信息*/
            loadCourses() {
                axios.get('/course/course').then(res => {
                    // 把返回结果赋值给data中的courses
                    this.courses = res.data;
                }).catch(err => {
                    console.error(err);
                });
            },
            /** 打开选课学生对话框 */
            openEnrollDlg() {
                // 1. 读取候选学生
                if (this.courseId === 0) {
                    alert('请选择目标课程！');
                } else {
                    console.log(this.courseid)
                    axios.get('/course-student/student:not-enrolled?courseId=' + this.courseId).then(res => {
                            this.candidates = res.data;
                            // 2. 开启选课对话框
                            this.$refs.dialog.showModal();
                        }
                    ).catch(err => {
                        console.error(err);
                        alert('读取候选学生失败！')
                    });
                }
            },
            /** 保存新增选课学生 */
            addCourseStudents() {
                let params = new URLSearchParams();
                params.append("courseId", this.courseId);
                params.append("year", 2020);
                params.append("studentIds", [this.studentId]);

                axios.post('/course-student/course-student/', params
                ).then(res => {
                    this.loadCourseStudents();
                    this.studentIds = [];
                    this.$refs.dialog.close();
                }).catch(err => {
                    console.error(err);
                    alert('增加选课失败');
                });
            },
            removeCourseStudent(courseStudentId) {
                console.log(courseStudentId);
                axios.delete(`/course-student/course-student/${courseStudentId.courseId}/${courseStudentId.studentId}/${courseStudentId.year}`)
                    .then(res => {
                        this.loadCourseStudents();
                    }).catch(err => {
                    console.error(err);
                });
            }

        },
        watch: {
            /** 当选择课程变化时， 重新读取选课数据 */
            courseId(value) {
                this.loadCourseStudents();
            },
            /** 当选择开课年变化时，重新读取选课数据 */
            year(value) {
                this.loadCourseStudents();
            }
        },

    }
    // 建立Vue App对象，并装载到html元素上
    Vue.createApp(app).mount('#app');
</script>
</body>
</html>